<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <script src="/layuiadmin/layui/layui.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="username">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <@shiro.hasPermission name="user:add">
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">新增</button>
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="user:update">
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="update">编辑</button>
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="user:select">
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="detail">查看</button>
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="user:repass">
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="changePwd">重置密码</button>
                    </@shiro.hasPermission>
                </div>
                <table id="myTable" lay-filter="myTable"></table>
                <script type="text/html" id="toolBar">
                    <@shiro.hasPermission name="user:select">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="user:update">
                        <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="user:del">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </@shiro.hasPermission>
                </script>
                <script type="text/html" id="agentLevel">
                    {{#  if(d.agentLevel == 0){ }}
                    <button class="layui-btn layui-btn-xs">非代理</button>
                    {{#  } else if(d.agentLevel == 1) { }}
                    <button class="layui-btn layui-btn-xs layui-btn-normal">普通代理</button>
                    {{#  } else if(d.agentLevel == 2) { }}
                    <button class="layui-btn layui-btn-xs layui-btn-danger">总代理</button>
                    {{#  } }}
                </script>
                <script type="text/html" id="test-table-toolbar-toolbarDemo">
                    <div class="layui-btn-container">
                    </div>
                </script>
            </div>
        </div>
    </div>

</body>

<script>

  layui.config({
      base: '/layuiadmin/' //静态资源所在路径
  }).extend({
      index: 'lib/index' //主入口模块
  }).use('table', function () {
      let $ = layui.$
          ,form = layui.form
          ,table = layui.table;
      table.render({
          elem: '#myTable'
          ,toolbar: '#test-table-toolbar-toolbarDemo'
          ,url: 'showUserList'
          ,cols: [[
              {checkbox: true, fixed: true}
              , {
                  field: 'username',
                  title: '用户名',
                  style: 'background-color: #009688; color: #fff;'
              }
              , {field: 'age', title: '年龄'}
              , {field: 'realName', title: '真实姓名'}
              , {title: '代理', align:'center', templet: '#agentLevel'}
              , {field: 'right', title: '操作', width: 170, toolbar: "#toolBar"}
          ]]
          ,page: true
          ,height: 'full-230'
          ,limit: 30
          ,text: {none: '无数据'}
      });

      //监听搜索
      form.on('submit(search)', function(data){
          let field = data.field;

          //执行重载
          table.reload('myTable', {
              where: field
          });
      });

      //监听工具条
      table.on('tool(myTable)', function (obj) {
          let data = obj.data;
          if (obj.event === 'detail') {
              layer.open({
                  type: 2,
                  area: [$(window).width()+'px', $(window).height() + 'px'],
                  content: 'updateUser?id=' + data.id +"&detail=true"
              });
          } else if (obj.event === 'del') {
              layer.confirm('确定删除用户[<label style="color: #00AA91;">' + data.username + '</label>]?', {
                  btn: ['逻辑删除', '物理删除']
              }, function () {
                  let data1={id:data.id,flag:true};
                  $.ajax({
                      url:"del",
                      type:"post",
                      data:data1,
                      success:function(d){
                          if(d.flag){
                              window.top.layer.msg(d.msg,{icon:6,offset: 'rb',area:['120px','80px'],anim:2});
                              layui.table.reload("myTable");
                          }else{
                              window.top.layer.msg(d.msg,{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
                          }
                      },error:function(){
                          alert('error');
                      }
                  });
              }, function () {
                  let data1={id:data.id,flag:false};
                  $.ajax({
                      url:"del",
                      type:"post",
                      data:data1,
                      success:function(d){
                          if(d.flag){
                              window.top.layer.msg(d.msg,{icon:6,offset: 'rb',area:['120px','80px'],anim:2});
                              layui.table.reload("myTable");
                          }else{
                              window.top.layer.msg(d.msg,{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
                          }
                      },error:function(){
                          alert('error');
                      }
                  });
              });
          } else if (obj.event === 'edit') {
              layer.open({
                  type: 2,
                  area: [$(window).width()+'px', $(window).height() + 'px'],
                  content: 'updateUser?id=' + data.id
              });
          }
      });

      //事件
      let active = {
          add: function () {
              layer.open({
                  type: 2,
                  area: [$(window).width()+'px', $(window).height() + 'px'],
                  content: 'showAddUser'
              });
          },
          update: function () {
              let checkStatus = table.checkStatus('myTable')
                  , data = checkStatus.data;
              if (data.length != 1) {
                  layer.msg('请选择一行编辑,已选['+data.length+']行', {icon: 5});
                  return false;
              }
              layer.open({
                  type: 2,
                  area: [$(window).width()+'px', $(window).height() + 'px'],
                  content: 'updateUser?id=' + data[0].id
              });
          },
          detail: function () {
              let checkStatus = table.checkStatus('myTable')
                  , data = checkStatus.data;
              if (data.length != 1) {
                  layer.msg('请选择一行查看,已选['+data.length+']行', {icon: 5});
                  return false;
              }
              layer.open({
                  type: 2,
                  area: [$(window).width()+'px', $(window).height() + 'px'],
                  content: 'updateUser?id=' + data[0].id +"&detail=true"
              });
          },
          changePwd:function(){
              let checkStatus = table.checkStatus('myTable')
                  , data = checkStatus.data;
              if (data.length != 1) {
                  layer.msg('请选择一个用户,已选['+data.length+']行', {icon: 5});
                  return false;
              }
              layer.open({
                  type: 2,
                  area: [$(window).width()+'px', $(window).height() + 'px'],
                  content: 'goRePass?id='+data[0].id
              });
          }
      };

      $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
      });

  });
</script>

</html>
